<template>
    <div>
        <p class="mt-2">基础布局：</p>
        <el-row class="mb-1 h-12">
            <el-col :span="24" class="bg-red-300 rounded"> </el-col>
        </el-row>
        <el-row class="mb-1 h-12">
            <el-col :span="12" class="bg-green-300 rounded"> </el-col>
            <el-col :span="12" class="bg-blue-300 rounded"> </el-col>
        </el-row>
        <el-row class="mb-1 h-12">
            <el-col :span="8" class="bg-yellow-300 rounded"></el-col>
            <el-col :span="8" class="bg-red-300 rounded"></el-col>
            <el-col :span="8" class="bg-green-300 rounded"></el-col>
        </el-row>
        <el-row class="mb-1 h-12">
            <el-col :span="6" class="bg-blue-300 rounded"></el-col>
            <el-col :span="6" class="bg-yellow-300 rounded"></el-col>
            <el-col :span="6" class="bg-red-300 rounded"></el-col>
            <el-col :span="6" class="bg-green-300 rounded"></el-col>
        </el-row>

        <p class="mt-2">分栏间隔:</p>
        <el-row :gutter="10" class="mb-1 h-12">
            <el-col :span="6"
                ><div class="bg-blue-300 h-12 rounded"></div
            ></el-col>
            <el-col :span="6"
                ><div class="bg-yellow-300 h-12 rounded"></div
            ></el-col>
            <el-col :span="6"
                ><div class="bg-red-300 h-12 rounded"></div
            ></el-col>
            <el-col :span="6"
                ><div class="bg-green-300 h-12 rounded"></div
            ></el-col>
        </el-row>

        <p class="mt-2">混合布局:</p>
        <el-row :gutter="10" class="mb-1 h-12">
            <el-col :span="16"
                ><div class="bg-blue-300 h-12 rounded"></div
            ></el-col>
            <el-col :span="8"
                ><div class="bg-yellow-300 h-12 rounded"></div
            ></el-col>
        </el-row>
        <el-row :gutter="10" class="mb-1 h-12">
            <el-col :span="8"
                ><div class="bg-red-300 h-12 rounded"></div></el-col
            ><el-col :span="8"
                ><div class="bg-green-300 h-12 rounded"></div
            ></el-col>
            <el-col :span="4"
                ><div class="bg-blue-300 h-12 rounded"></div
            ></el-col>
            <el-col :span="4"
                ><div class="bg-yellow-300 h-12 rounded"></div
            ></el-col>
        </el-row>
        <el-row :gutter="10" class="mb-1 h-12">
            <el-col :span="4"
                ><div class="bg-red-300 h-12 rounded"></div></el-col
            ><el-col :span="16"
                ><div class="bg-green-300 h-12 rounded"></div
            ></el-col>
            <el-col :span="4"
                ><div class="bg-blue-300 h-12 rounded"></div
            ></el-col>
        </el-row>

        <p class="mt-2">分栏偏移:</p>
        <el-row :gutter="10" class="mb-1 h-12">
            <el-col :span="6"
                ><div class="bg-yellow-300 h-12 rounded"></div
            ></el-col>
            <el-col :span="6" :offset="6"
                ><div class="bg-red-300 h-12 rounded"></div
            ></el-col>
        </el-row>
        <el-row :gutter="10" class="mb-1 h-12">
            <el-col :span="6" :offset="6"
                ><div class="bg-green-300 h-12 rounded"></div></el-col
            ><el-col :span="6" :offset="6"
                ><div class="bg-blue-300 h-12 rounded"></div
            ></el-col>
        </el-row>
        <el-row :gutter="10" class="mb-1 h-12">
            <el-col :span="16" :offset="4"
                ><div class="bg-yellow-300 h-12 rounded"></div
            ></el-col>
        </el-row>

        <p class="mt-2">对齐方式:</p>
        <el-row type="flex" :gutter="10" class="mb-1 h-12">
            <el-col :span="6"
                ><div class="bg-red-300 h-12 rounded"></div
            ></el-col>
            <el-col :span="6"
                ><div class="bg-green-300 h-12 rounded"></div
            ></el-col>
            <el-col :span="6"
                ><div class="bg-blue-300 h-12 rounded"></div
            ></el-col>
        </el-row>
        <el-row type="flex" justify="center" :gutter="10" class="mb-1 h-12">
            <el-col :span="6"
                ><div class="bg-yellow-300 h-12 rounded"></div
            ></el-col>
            <el-col :span="6"
                ><div class="bg-red-300 h-12 rounded"></div
            ></el-col>
            <el-col :span="6"
                ><div class="bg-green-300 h-12 rounded"></div
            ></el-col>
        </el-row>
        <el-row type="flex" justify="end" :gutter="10" class="mb-1 h-12">
            <el-col :span="6"
                ><div class="bg-blue-300 h-12 rounded"></div
            ></el-col>
            <el-col :span="6"
                ><div class="bg-yellow-300 h-12 rounded"></div
            ></el-col>
            <el-col :span="6"
                ><div class="bg-red-300 h-12 rounded"></div
            ></el-col>
        </el-row>
        <el-row type="flex" justify="space-between" :gutter="10" class="mb-1 h-12">
            <el-col :span="6"
                ><div class="bg-green-300 h-12 rounded"></div
            ></el-col>
            <el-col :span="6"
                ><div class="bg-blue-300 h-12 rounded"></div
            ></el-col>
            <el-col :span="6"
                ><div class="bg-yellow-300 h-12 rounded"></div
            ></el-col>
        </el-row>
        <el-row type="flex" justify="space-around" :gutter="10" class="mb-1 h-12">
            <el-col :span="6"
                ><div class="bg-red-300 h-12 rounded"></div
            ></el-col>
            <el-col :span="6"
                ><div class="bg-green-300 h-12 rounded"></div
            ></el-col>
            <el-col :span="6"
                ><div class="bg-blue-300 h-12 rounded"></div
            ></el-col>
        </el-row>
        <el-row type="flex" :gutter="10" class="mb-1 h-12 justify-evenly">
            <el-col :span="6"
                ><div class="bg-yellow-300 h-12 rounded"></div
            ></el-col>
            <el-col :span="6"
                ><div class="bg-red-300 h-12 rounded"></div
            ></el-col>
            <el-col :span="6"
                ><div class="bg-green-300 h-12 rounded"></div
            ></el-col>
        </el-row>

        <p class="mt-2">响应式布局:</p>
        <el-row :gutter="10" class="mb-1 h-12">
            <el-col :span="6" :xs="8" :sm="6" :md="4" :lg="3" :xl="1"
                ><div class="bg-blue-300 h-12 rounded"></div
            ></el-col>
            <el-col :span="6" :xs="4" :sm="6" :md="8" :lg="9" :xl="11"
                ><div class="bg-yellow-300 h-12 rounded"></div></el-col
            ><el-col :span="6" :xs="4" :sm="6" :md="8" :lg="9" :xl="11"
                ><div class="bg-red-300 h-12 rounded"></div
            ></el-col>
            <el-col :span="6" :xs="8" :sm="6" :md="4" :lg="3" :xl="1"
                ><div class="bg-green-300 h-12 rounded"></div
            ></el-col>
        </el-row>

        <div class="h-12"></div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "CompName",
    setup() {
        return {};
    },
});
</script>

<style scoped></style>
